<template>
  <div class="page_root" :key="queryUpdateFlag" data-page-name="审批管理-定制" data-page-identification="f_evcy3s67ww">
    <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
      <!-- begin vid_ymq5ravira 自定义模板_imy6jgazxy -->
      <a-modal :visible="reasonVisible" title="驳回原因" centered :footer="null" @cancel="reasonVisible = false" :z-index="1010">
        {{ reason }}
      </a-modal>
      <!--          批量通过/通过/驳回/撤销-->
      <a-modal
        :visible="approveState.approveModalVisible"
        :title="approveState.approveModalTitle"
        centered
        @ok="handleConfirmApprove"
        @cancel="handleCancelApprove"
        :ok-button-props="{
                    loading: approveState.approveBtnLoading
                }"
        :z-index="1010"
      >
        <!--              :style="{ zIndex: 9999 }"-->
        <div v-if="approveState.approveModalTitle === '批量审批通过'"> 已选择{{ allDailyId.length }}个审批事项,是否全部审批通过？ </div>
        <div v-else-if="approveState.approveModalTitle === '审批驳回'">
          <a-textarea v-model:value="approveState.approveRemark" :row="4" placeholder="请输入驳回原因" />
        </div>
        <div v-else-if="approveState.approveModalTitle === '审批通过'">
          <a-textarea v-model:value="approveState.approveRemark" :row="4" placeholder="请输入备注" />
        </div>
      </a-modal>
      <!--          通过/驳回/撤销-->
      <a-modal
        title="审批详情"
        :visible="iframShow"
        width="100vw"
        :body-style="{
                    height: '800px',
                    paddingTop: '16px'
                }"
        :z-index="1000"
        style="top: 0"
        @cancel="approveStatusCancel"
        centered
        ok-text="通过"
        cancel-text="驳回"
        :ok-button-props="{ loading: approveBtnLoading }"
      >
        <template #footer>
          <a-button type="primary" v-if="activeKey === '待办事项'" @click="handlePass(null)">通过</a-button>
          <a-button type="primary" v-if="activeKey === '待办事项'" @click="handleReject(null)">驳回</a-button>
          <a-button type="primary" v-if="activeKey === '我发起的' && approveState.currentApprove.processStatus === 'IN_PROCESS'" @click="handleRevoke(null)">撤销</a-button>
          <a-button type="primary" v-if="activeKey === '我发起的' && approveState.currentApprove.processStatus === 'IN_PROCESS'" @click="handleReminder(null)">催办</a-button>
        </template>
        <div class="detail-content">
          <div class="detail-left">
            <iframe id="myIframe" :src="showUrl" allowfullscreen height="100%" width="100%"></iframe>
          </div>
          <div class="detail-right">
            <div class="flow-path">流程日志</div>
            <!--                    <div class="title-new-status">-->
            <!--                        <div class="left-title">审批类型:{{ statuState.list.processName }}</div>-->
            <!--                        <div class="right-title">审批提交时间:{{ statuState.list.createdDate }}</div>-->
            <!--                    </div>-->
            <a-steps class="status-step" direction="vertical">
              <a-step v-for="(inside, index) in statuState.list.processTaskList" :status="getIconStatus(inside.assignStatus)">
                <template #title>
                  <div v-if="inside.taskName">
                    <CheckCircleFilled style="color: #52c41a" v-if="inside.assignResult === 'APPROVE'" />
                    <CloseCircleFilled v-if="inside.assignResult === 'REJECT'" style="color: #ff4d4f" />
                    {{
                                            getTextStatus(inside.assignResult) + inside.taskName === '结束节点'
                                                ? inside.taskName
                                                : inside.taskName + ':' + inside.assignUserName
                    }}
                  </div>
                  <div v-else> 系统 </div>
                </template>
                <template #description>
                  <div>
                    {{ inside.lastModifiedDate }}
                  </div>
                  <div>
                    {{ inside.assignRemark }}
                  </div>
                </template>
              </a-step>
            </a-steps>
          </div>
        </div>
      </a-modal>
      <div class="body">
        <a-tabs v-model:activeKey="activeKey" size="large" @change="activeChange">
          <a-tab-pane key="待办事项">
            <template #tab>待办事项({{ approveState.countDara.todoCount }})</template>
          </a-tab-pane>
          <a-tab-pane key="已办事项">
            <template #tab>已办事项({{ approveState.countDara.doneCount }})</template>
          </a-tab-pane>
          <a-tab-pane key="我发起的">
            <template #tab>我发起的({{ approveState.countDara.createCount }})</template>
          </a-tab-pane>
          <a-tab-pane key="抄送我的">
            <template #tab>抄送我的({{ approveState.countDara.ccCount }})</template>
          </a-tab-pane>
        </a-tabs>
        <div class="top-tag-container">
          <div class="cover" v-if="tagsData.length > 0"></div>
          <div class="cover1" v-if="tagsData.length > 0"></div>
          <div class="top-tag" v-if="tagsData.length > 0">
            <a-checkable-tag v-for="(tag, index) in tagsData" :key="tag.title" :checked="selectedTag === tag" @change="checked => handleChange(tag, checked)" :class="{ sticky: index === 0 }">
              {{ tag.processName }}({{ tag.count }})
            </a-checkable-tag>
          </div>
        </div>
        <a-spin :spinning="mainLoading" tip="请稍等...">
          <div class="main">
            <div class="no-data-img" v-if="approveState.approveData.length == 0">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="265px" height="192px" viewBox="0 0 265 192" version="1.1">
                <title>暂无待办事项</title>
                <defs>
                  <linearGradient x1="50%" y1="85.1278551%" x2="50%" y2="-24.3022005%" id="linearGradient-1">
                    <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                    <stop stop-color="#3875FF" stop-opacity="0.2" offset="100%" />
                  </linearGradient>
                  <linearGradient x1="50%" y1="85.1278551%" x2="50%" y2="-24.3022005%" id="linearGradient-2">
                    <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                    <stop stop-color="#3875FF" stop-opacity="0.2" offset="100%" />
                  </linearGradient>
                  <linearGradient x1="50%" y1="85.1278551%" x2="50%" y2="-24.3022005%" id="linearGradient-3">
                    <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                    <stop stop-color="#3875FF" stop-opacity="0.2" offset="100%" />
                  </linearGradient>
                  <linearGradient x1="50%" y1="50%" x2="50%" y2="-4.79965365%" id="linearGradient-4">
                    <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                    <stop stop-color="#3875FF" stop-opacity="0.1" offset="100%" />
                  </linearGradient>
                  <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-5">
                    <stop stop-color="#9CBEF7" offset="0%" />
                    <stop stop-color="#96D1F7" offset="100%" />
                  </linearGradient>
                  <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-6">
                    <stop stop-color="#9CBEF7" offset="0%" />
                    <stop stop-color="#96D1F7" offset="100%" />
                  </linearGradient>
                </defs>
                <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g id="审批管理-暂无待办事项" transform="translate(-927, -470)">
                    <g id="暂无待办事项" transform="translate(927, 470)">
                      <g id="编组-69备份-3备份-3" fill-rule="nonzero">
                        <path
                          d="M30.4,70.4 C38.3897145,70.4 44.9396432,76.4022329 45.5530639,84.0283112 C45.8323774,84.0092712 46.1150286,84 46.4,84 C53.027417,84 58.4,89.0144112 58.4,95.2 C58.4,101.385589 53.027417,106.4 46.4,106.4 C46.1313282,106.4 45.8647188,106.391759 45.6004459,106.375534 L45.6,107.2 L8.8,107.2 L8.80006856,105.99739 C3.72613437,104.690379 0,100.351322 0,95.2 C0,89.0144112 5.372583,84 12,84 C13.1159648,84 14.1963502,84.1421776 15.2214963,84.4081848 C15.6437054,76.6027782 22.2779069,70.4 30.4,70.4 Z"
                          id="形状结合备份"
                          fill="url(#linearGradient-1)"
                        />
                        <path
                          d="M174.4,35.2 L174.400166,35.1009906 C168.085987,34.3137074 163.2,28.9274454 163.2,22.4 C163.2,15.3307552 168.930755,9.6 176,9.6 C177.223344,9.6 178.406604,9.77161808 179.527019,10.0920919 C181.87653,4.17968127 187.650157,0 194.4,0 C202.141022,0 208.598072,5.49733733 210.080147,12.8010091 C216.449395,12.8415186 221.6,17.8400063 221.6,24 C221.6,30.0561716 216.621551,34.98966 210.40049,35.1934501 L210.4,35.2 L174.4,35.2 Z"
                          id="形状结合"
                          fill="url(#linearGradient-2)"
                          transform="translate(192.4, 17.6) scale(-1, 1) translate(-192.4, -17.6)"
                        />
                        <path
                          d="M242.8,47.2 C247.491543,47.2 251.362882,50.7117164 251.928816,55.249951 C252.214523,55.2167339 252.505192,55.2 252.8,55.2 C256.77645,55.2 260,58.2444637 260,62 C260,65.7555363 256.77645,68.8 252.8,68.8 C252.529676,68.8 252.262831,68.7859302 252.000242,68.7585236 L252,69.6 L229.6,69.6 L229.600068,68.6315132 C226.393652,67.9443906 224,65.2361993 224,62 C224,58.2444637 227.22355,55.2 231.2,55.2 C232.054514,55.2 232.874259,55.3405911 233.634718,55.5986176 C234.040539,50.892793 237.989021,47.2 242.8,47.2 Z"
                          id="形状结合备份-2"
                          fill="url(#linearGradient-3)"
                        />
                        <g id="编组-50" transform="translate(1.6, 76.8)">
                          <ellipse id="椭圆形" fill="url(#linearGradient-4)" cx="131.6" cy="57.6" rx="131.6" ry="57.6" />
                          <g id="编组-46" transform="translate(30.4, 4.8)">
                            <rect id="矩形" fill="#D7E3FF" x="6.4" y="20" width="2.4" height="12" />
                            <path
                              d="M8.4,21.5460356 C25.469423,21.5460356 11.8000002,-1.42108547e-14 8.4,-1.42108547e-14 C4.99999998,-1.42108547e-14 -8.66942296,21.5460356 8.4,21.5460356 Z"
                              id="椭圆形"
                              fill="#EAF0FF"
                            />
                          </g>
                          <g id="编组-46备份-2" transform="translate(218.4, 4.8)">
                            <rect id="矩形" fill="#D7E3FF" x="4.97664" y="13.824" width="1.65888" height="8.2944" />
                            <path
                              d="M5.80608,14.8926198 C17.6044651,14.8926198 8.15616008,-9.8225428e-15 5.80608,-9.8225428e-15 C3.45599989,-9.8225428e-15 -5.99230512,14.8926198 5.80608,14.8926198 Z"
                              id="椭圆形"
                              fill="#EAF0FF"
                            />
                          </g>
                          <g id="编组-46备份" transform="translate(245.6, 21.6)">
                            <rect id="矩形" fill="#D7E3FF" x="3.6" y="10" width="1.2" height="6" />
                            <path
                              d="M4.2,10.7730178 C12.7347114,10.7730178 5.90000008,-7.10542736e-15 4.2,-7.10542736e-15 C2.5,-7.10542736e-15 -4.33471146,10.7730178 4.2,10.7730178 Z"
                              id="椭圆形"
                              fill="#EAF0FF"
                            />
                          </g>
                        </g>
                      </g>
                      <g id="编组-61" transform="translate(89.6, 21.6)">
                        <ellipse id="椭圆形" fill="#E2EBFF" fill-rule="nonzero" cx="42.8" cy="80" rx="42.8" ry="4.8" />
                        <rect id="矩形备份-91" fill="url(#linearGradient-5)" x="5.6" y="0" width="70.4" height="80.8" rx="3.2" />
                        <g id="编组-60" transform="translate(20.8, 28)" fill="#FFFFFF" fill-rule="nonzero">
                          <rect id="矩形" x="0" y="0" width="40" height="3.2" rx="1.6" />
                          <rect id="矩形备份-92" x="0" y="15.2" width="40" height="3.2" rx="1.6" />
                          <rect id="矩形备份-93" x="0" y="30.4" width="40" height="3.2" rx="1.6" />
                        </g>
                        <path
                          d="M21.6,0 L60.7346814,0 L55.7992343,8.40508424 C55.6555754,8.64973584 55.393086,8.8 55.1093744,8.8 L27.225307,8.8 C26.9415954,8.8 26.6791059,8.64973584 26.535447,8.40508424 L21.6,0 L21.6,0 Z"
                          id="矩形"
                          fill="#FFFFFF"
                          fill-rule="nonzero"
                        />
                        <rect id="矩形备份-94" fill="url(#linearGradient-6)" x="29.6" y="0" width="23.2" height="3.2" rx="1.6" />
                      </g>
                    </g>
                  </g>
                </g>
              </svg>
              <div class="no-data-msg">暂无{{ activeKey }}</div>
            </div>
            <!-- 显示项目类型标题 -->

            <div
              class="type-title"
              v-if="
                                (selectedTag?.thirdProcessCode === 'work_flow_code_daily_00000001' ||
                                    selectedTag?.thirdProcessCode === 'work_flow_code_daily_00000002') &&
                                activeKey === '待办事项'
                            "
            >
              <a-checkbox style="margin-top: 10px" v-model:checked="checked" @change="handleCheckAllDaily(group)">全选</a-checkbox>
              <div class="sub-daily" @click="batchApproval">批量通过</div>
            </div>
            <div v-for="item in approveState.approveData" :key="item.processInstanceId" class="item">
              <div class="item-top">
                <div class="sub-time">
                  <span class="default-font">审批类型：</span>
                  <span class="weight-font">{{ item.processName }}</span>
                </div>
                <div class="sub-time">
                  <span class="default-font">申请时间：</span>
                  <span class="weight-font">{{ item.createdDate }}</span>
                </div>
                <div class="sub-people">
                  <span class="default-font">申请人：</span>
                  <span class="weight-font">{{ item.createdByName }}</span>
                </div>
                <div
                  class="approve-status"
                  v-if="
                                        activeKey === '我发起的' || activeKey === '已办事项' || activeKey === '抄送我的'
                                    "
                >
                  <div v-if="item.processStatus === 'IN_PROCESS'" class="in-progress">审批中</div>
                  <div v-if="item.processStatus === 'APPROVED'" class="approved">已通过</div>
                  <div v-if="item.processStatus === 'REJECT'" class="reject">被驳回</div>
                  <div v-if="item.processStatus === 'REVOKE'" class="revoke">已撤销</div>
                  <div v-if="item.processStatus === 'END'" class="reject">已结束</div>
                </div>
                <div class="urging" v-if="item.urge">催办</div>
              </div>
              <div class="item-inner">
                <a-checkbox
                  v-if="
                                        (selectedTag?.thirdProcessCode === 'work_flow_code_daily_00000001' ||
                                            selectedTag?.thirdProcessCode === 'work_flow_code_daily_00000002') &&
                                        activeKey === '待办事项'
                                    "
                  style="margin-top: 10px; margin-right: 16px"
                  @change="itemCheck(item)"
                  v-model:checked="item.selected"
                />

                <div v-for="field in item.fields" :key="field.title" class="item-content">
                  <span class="item-title">{{ field.title }}</span>
                  <a-tooltip>
                    <template #title>{{ field.value }}</template>
                    <span :class="field.class" class="item-main" :id="field.id">{{
                                            field.value
                    }}</span>
                  </a-tooltip>
                </div>
                <div class="detail-batch">
                  <a-space v-if="activeKey === '待办事项'">
                    <div class="detail-btn" @click="handleGetDetail(item)">详情</div>
                    <div class="pass-btn" @click="() => handlePass(item)">通过</div>
                    <div class="reject-btn" @click="handleReject(item)">驳回</div>
                  </a-space>
                  <a-space v-if="activeKey === '我发起的'">
                    <div class="detail-btn" @click="handleGetDetail(item)">详情</div>
                    <div class="reject-btn" v-if="item.processStatus === 'REJECT'" @click="handleGetReason(item)">驳回原因</div>
                    <div class="urg-btn" v-if="item.processStatus === 'IN_PROCESS'" @click="handleReminder(item)">催办</div>
                    <div class="reject-btn" v-if="item.processStatus === 'IN_PROCESS'" @click="handleRevoke(item)">撤销</div>
                  </a-space>
                  <a-space v-if="activeKey === '已办事项'">
                    <div class="detail-btn" @click="handleGetDetail(item)">详情</div>
                    <div class="reject-btn" v-if="item.processStatus === 'REJECT'" @click="handleGetReason(item)">驳回原因</div>
                  </a-space>
                  <a-space v-if="activeKey === '抄送我的'">
                    <div class="detail-btn" @click="handleGetDetail(item)">详情</div>
                    <div class="reject-btn" v-if="item.processStatus === 'REJECT'" @click="handleGetReason(item)">驳回原因</div>
                  </a-space>
                </div>
              </div>
              <!-- 操作部分 -->
            </div>
          </div>
        </a-spin>
      </div>

      <!-- end vid_ymq5ravira 自定义模板_imy6jgazxy -->
      <div class="pagination-div">
        <a-pagination
          v-model:current="pagination.current"
          :total="pagination.total"
          :show-total="pagination.showTotal"
          show-quick-jumper
          :show-size-changer="true"
          :page-size-options="pagination.pageSizeOptions"
          @show-size-change="pageSizeChange"
          @change="pageChange"
        />
      </div>
      <!-- end vid_ymq5ravira 自定义模板_imy6jgazxy -->
    </a-spin>
  </div>
</template>
<script setup lang="tsx">
  import {
      h, ref, reactive, toRaw, markRaw, watch, computed,
      onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated
    } from "vue";
    import { useRoute, useRouter } from 'vue-router';
    const router = useRouter();
    const route = useRoute();
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
    import { cloneDeep, localGet, merge, getDifferenceArray, traversalTreeStructure, checkCaseCondition, renderStringInTemplate, handleBreadcrumbJump, throttle, permission, getComponentParamsValue } from '@/utils/index';
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is';
    import dayjs from 'dayjs';
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
    import { message, notification, Modal } from 'ant-design-vue'
    import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate, parseSubFromDataList } from '@/utils/format';
    import colorTheme from '@/design/custom-theme.json';
    
    import UserTableRecords from '@/model/UserTableRecords';
    import { getAppBaseUrl } from '@/utils/index';
    import { sendToken } from "@/hooks/useIframeToken";
    import { useSystemStore } from "@/store/modules/system";
    const systemStore = useSystemStore();
    



      // 获取传入的流程ID和组件参数
      const props = defineProps({
            'processInstanceId': {
            type: [String,Number,Boolean],
            default: undefined,
        },
      })
      const immediateWatch = (source, callback) => {
        watch(source, callback, {deep: true,immediate: true })
      }



  /* -------------------------- 属性定义 -------------------------- */

      const setTimeOutList = [];
      const pageLoading = reactive({
        loading: false,
        tip: undefined
      });
      const authInfo = localGet('app-user-store');




      // 处理校验
      const setSubFormName =(parentInfo, name)=>{
        return [parentInfo.parents, parentInfo.cycleIndex, name];
      }


  /* ========================== 属性定义 ========================== */


  /* -------------------------- 元素数据引用 -------------------------- */


  /* ========================== 元素数据引用 ========================== */


  /* -------------------------- 页面数据 -------------------------- */


  /* ========================== 页面数据 ========================== */



  /* -------------------------- 响应 -------------------------- */

  /* ========================== 响应 ========================== */


  /* -------------------------- 函数 -------------------------- */

  /* ========================== 函数 ========================== */


  /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId,
    })

  /* ========================== 页面参数 ========================== */


  /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================


  /* ========================== 组件事件处理方法 ========================== */


  /* -------------------------- 生命周期 -------------------------- */
  // 用于参数变更后重新执行自定义指令
      const queryUpdateFlag = ref(0);
      onMounted(() => { ;

    });

    onUnmounted(() => {
      // 销毁定时器
      setTimeOutList.forEach(({ repeat, timer }) => {
        repeat ?  clearInterval(timer): clearTimeout(timer);
      });
    });

  /* ========================== 生命周期 ========================== */


  /* -------------------------- 数据关联处理 -------------------------- */





  /* -------------------------- 表单数据同步 -------------------------- */
  /* ========================== 表单数据同步 ========================== */

  /* ========================== 数据关联处理 ========================== */


  /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

  /* ========================== 不同组件自定义的处理逻辑 ========================== */


  // ================================定制化逻辑========================================
   // 审批管理数据
      const pageSizeChange = (current, size) => {
          pagination.value.current = current
          pagination.value.pageSize = size
          getApproveData()
      }
      const pageChange = (page, pageSize) => {
          pagination.value.current = page
          pagination.value.pageSize = pageSize
          getApproveData()
      }
      const pagination = ref({
          current: 1,
          pageSize: 20,
          showSizeChanger: true,
          total: 0,
          pageSizeOptions: ['20', '40', '60', '80', '100'],
          showTotal: total =>
              `共 ${total} 个项目 第${pagination.value.current}/${Math.ceil(
                  pagination.value.total / pagination.value.pageSize
              )}页`
      })

      const activeKey = ref('待办事项')
      const innerActiveKey = ref('')
      const tagsData = ref([])
      const selectedTag = ref({})
      const checkName = ref('')
      const handleChange = (tag, checked) => {
          if (checked) {
              checkName.value = tag.processName
              selectedTag.value = tag
              getApproveData()
          } else {
              selectedTag.value = {}
          }
      }
      onMounted(async () => {
          getCount()
          getTagData()
      })
      const mainLoading = ref(false)
      const approveState = reactive({
          countDara: {},
          approveData: [],
          currentApprove: {},
          approveModalTitle: '',
          approveModalVisible: false,
          approveRemark: '',
          approveBtnLoading: false
      })

      const checked = ref(false)
      const allDailyId = ref([])
      function handleCheckAllDaily() {
          allDailyId.value = []
          if (checked.value) {
              approveState.approveData.forEach(item => {
                  item.selected = true
              })
              allDailyId.value = approveState.approveData.map(item => {
                  return {
                      processInstanceId: item.processInstanceId,
                      taskId: item.taskId
                  }
              })
          } else {
              approveState.approveData.forEach(item => {
                  item.selected = false
              })
              allDailyId.value = []
          }
      }
      // 单选
      function itemCheck(item) {
          if (item.selected) {
              allDailyId.value.push({
                  processInstanceId: item.processInstanceId,
                  taskId: item.taskId
              })
          } else {
              const index = allDailyId.value.findIndex(
                  i => i.processInstanceId === item.processInstanceId && i.taskId === item.taskId
              )
              if (index !== -1) {
                  allDailyId.value.splice(index, 1)
              }
          }
      }

      watch(
          () => allDailyId.value,
          () => {
              if (allDailyId.value.length == approveState.approveData.length) {
                  checked.value = true
              } else {
                  checked.value = false
              }
          },
          { deep: true }
      )
      //     详情
      function handleGetDetail(item) {
          approveState.currentApprove = item
          let currentUrl = window.location.origin
          // currentUrl = 'http://asa-qa.allintechinc.com'
          let endUrl = formatUrl(item.currentNode.pageConfig.urlPc)
          showUrl.value = `${currentUrl}/${endUrl}?processInstanceId=${item.processInstanceId}`
          // showUrl.value = `http://asa-qa.allintechinc.com/app_50000005/process/70352ff9-3780-11ef-83e9-52a5438c6e27/startNode1/MyInitiated`;
          iframShow.value = true
          getApproveStatus(item.processInstanceId, item.taskId)
      }
      const reasonVisible = ref(false)
      const reason = ref('')
      // 驳回原因
      function handleGetReason(item) {
          get(`/workflow-platform/api/v1/process_instance/detail/${item.processInstanceId}/${item.taskId} `).then(
              data => {
                  let reasonItem = data.data.processTaskList.find(item => item.assignResult === 'REJECT')
                  reason.value = reasonItem.assignRemark
                  reasonVisible.value = true
              }
          )
      }
      const getIconStatus = status => {
          if (status === 'HANDLED' || status === 'SIPED') {
              return 'finish'
          } else if (status === 'WAIT_HANDLE') {
              return 'wait'
          } else {
              return 'finish'
          }
      }
      const getTextStatus = text => {
          if (text == 'CC') {
              return '(抄送)'
          } else {
              return ''
          }
      }
      const getResult = item => {
          console.log(item)
          if (item.taskName === '结束节点') {
              return '结束节点'
          } else {
              return item.taskName + item.assignUserName
          }
      }

      // 查流程日志
      const statuState = reactive({
          visible: true,
          list: []
      })
      function getApproveStatus(id, type) {
          get(`/workflow-platform/api/v1/process_instance/detail/${id}/${type} `).then(data => {
              statuState.list = data.data
          })
      }
      function formatUrl(url) {
          // 检查是否已经是完整的URL
          if (url.startsWith('app_')) {
              return url
          } else {
              // 如果不是，则补全前缀
              return `app_50000005/page/${url}`
          }
      }
      function iframCancel() {
          approveState.approveModalTitle = '审批驳回'
          approveState.approveModalVisible = true
      }
      const keyMapping = {
          '待办事项': 'todo',
          '已办事项': 'done',
          '我发起的': 'myCreate',
          '抄送我的': 'cc'
      }

      const mappedActiveKey = computed(() => keyMapping[activeKey.value])

      // 驳回
      function handleReject(item) {
          if (item) {
              approveState.currentApprove = item
          }
          approveState.approveModalTitle = '审批驳回'
          approveState.approveModalVisible = true
      }
      // 通过
      function handlePass(item) {
          if (item) {
              approveState.currentApprove = item
          }
          approveState.approveModalTitle = '审批通过'
          approveState.approveModalVisible = true
      }
      //     催办
      function handleReminder(item) {
          if (item) {
              approveState.currentApprove = item
              if (approveState.currentApprove.urge) {
                  message.info('该审批已经催办了！')
                  return
              }
          }

          mainLoading.value = true
          put(`/workflow-platform/api/v1/process_instance/urge/${approveState.currentApprove.processInstanceId}`)
              .then(data => {
                  message.success('已为您催办')
                  iframShow.value = false
              })
              .catch(e => {
                  message.error(e.errorMsg)
              })
              .finally(() => {
                  mainLoading.value = false
              })
      }
      //     撤销
      function handleRevoke(item) {
          if (item) {
              approveState.currentApprove = item
          }
          mainLoading.value = true
          put(`/workflow-platform/api/v1/process_instance/revoke/${approveState.currentApprove.processInstanceId}`, {
              revokeReason: '撤销'
          })
              .then(data => {
                  iframShow.value = false
                  message.success('已为您撤销')
                  getTagData()
                  getCount()
              })
              .catch(e => {
                  message.error(e.errorMsg)
              })
              .finally(() => {
                  mainLoading.value = false
              })
      }
      // 批量通过
      function batchApproval() {
          if (allDailyId.value.length == 0) {
              message.info('请全选或多选工时日报审批')
              return
          }
          approveState.approveModalTitle = '批量审批通过'
          approveState.approveModalVisible = true
      }
      // 确认审批
      function handleConfirmApprove() {
          if (approveState.approveModalTitle === '审批驳回') {
              approveState.approveBtnLoading = true
              put('/workflow-platform/api/v1/process_instance/task/approve', {
                  approveAction: 'REJECT',
                  approveRemark: approveState.approveRemark,
                  processInstanceId: approveState.currentApprove.processInstanceId,
                  taskId: approveState.currentApprove.taskId
              })
                  .then(data => {
                      if (data.errorMsg) {
                          message.error(data.errorMsg)
                      } else {
                          message.success('已驳回审批')
                          approveState.approveModalVisible = false
                          iframShow.value = false
                          showUrl.value = ''
                          getTagData()
                          getCount()
                      }
                  })
                  .catch(e => {
                      message.error(e.errorMsg)
                  })
                  .finally(() => {
                      approveState.approveBtnLoading = false
                  })
          } else if (approveState.approveModalTitle === '批量审批通过') {
              approveState.approveBtnLoading = true
              const params = {
                  taskList: allDailyId.value,
                  approveRemark: '批量审批',
                  approveAction: 'APPROVE'
              }
              put('/workflow-platform/api/v1/process_instance/task/approve/batch', params)
                  .then(data => {
                      if (data.errorMsg) {
                          message.error(data.errorMsg)
                      } else {
                          message.success('已通过批量审批')
                          approveState.approveModalVisible = false
                          getTagData()
                          getCount()
                          allDailyId.value = []
                          checked.value = false
                      }
                  })
                  .catch(e => {
                      message.error(e.errorMsg)
                  })
                  .finally(() => {
                      approveState.approveBtnLoading = false
                  })
          } else if (approveState.approveModalTitle === '审批通过') {
              approveState.approveBtnLoading = true
              put('/workflow-platform/api/v1/process_instance/task/approve', {
                  approveAction: 'APPROVE',
                  approveRemark: approveState.approveRemark,
                  processInstanceId: approveState.currentApprove.processInstanceId,
                  taskId: approveState.currentApprove.taskId
              })
                  .then(data => {
                      if (data.errorMsg) {
                          message.error(data.errorMsg)
                      } else {
                          message.success('已通过审批')
                          approveState.approveModalVisible = false
                          iframShow.value = false
                          showUrl.value = ''
                          getTagData()
                          getCount()
                      }
                  })
                  .catch(e => {
                      message.error(e.errorMsg)
                  })
                  .finally(() => {
                      mainLoading.value = false
                      approveState.approveBtnLoading = false
                  })
          }
      }
      // 取消审批
      function handleCancelApprove() {
          approveState.approveModalVisible = false
          approveState.approveRemark = ''
      }
      const iframShow = ref(false)
      const showUrl = ref('')
      // 获取顶部tag
      function getTagData() {
          selectedTag.value = null
          tagsData.value = []
          get(`/solution-ppm/api/v2/built-in-system-ppm/approve/classify/${mappedActiveKey.value}/ALL`).then(data => {
              if (data.code === 200) {
                  tagsData.value = data.data
                  if (checkName.value) {
                      const checkIndex = tagsData.value.find(item => item.processName === checkName.value)
                      if (checkIndex) {
                          selectedTag.value = checkIndex
                          getApproveData()
                      } else {
                          selectedTag.value = tagsData.value[0]
                          getApproveData()
                      }
                  } else {
                      selectedTag.value = tagsData.value[0]
                      getApproveData()
                  }
              }
          })
      }
      function approveStatusCancel() {
          iframShow.value = false
          approveState.approveRemark = ''
          approveState.currentApprove = {}
      }
      // 获取数量
      function getCount() {
          get('/workflow-platform/api/v1/process_instance/task/counter').then(data => {
              approveState.countDara = data.data
          })
      }
      const defaultMap = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目代号', field: 'projectCode' }
      ]
      const map1 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目代号', field: 'projectCode' },
          { title: '项目负责人', field: 'plName' },
          { title: '产品经理', field: 'productLeaderName' },
          { title: '项目经理', field: 'pmName' }
      ]
      const map2 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目代号', field: 'projectCode' },
          { title: '项目阶段名称', field: 'milepostName' },
          { title: '任务名称', field: 'taskName' },
          { title: '任务负责人', field: 'taskOwner' },
          { title: '审核员', field: 'assessorName' }
      ]
      const map3 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目代号', field: 'projectCode' },
          { title: '项目总监', field: 'projectDirector' },
          { title: 'PMO', field: 'projectManagementOffice' },
          { title: '项目经理', field: 'pmName' }
      ]
      const map4 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目代号', field: 'projectCode' },
          { title: '项目阶段名称', field: 'milepostName' },
          { title: '项目经理', field: 'pmName' }
      ]
      const map5 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目代号', field: 'projectCode' },
          { title: '项目阶段名称', field: 'milepostName' },
          { title: '任务名称', field: 'taskName' },
          { title: '项目经理', field: 'pmName' }
      ]
      const map6 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目总监', field: 'projectDirector' },
          { title: 'PMO', field: 'projectManagementOffice' },
          { title: '项目经理', field: 'pmName' }
      ]
      const map7 = [{ title: '模板名称', field: 'templateName' }]
      const map8 = [
          { title: '行动项任务名称', field: 'actionTaskName' },
          { title: '任务负责人', field: 'taskOwner' },
          { title: '审核员', field: 'assessorName' },
          { title: 'PMO', field: 'projectManagementOffice' }
      ]
      const map9 = [{ title: '项目名称', field: 'projectName' }]
      const map10 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目类型', field: 'projectType' },
          { title: '团队负责人', field: 'teamLeader' },
          { title: '负责人', field: 'leader' }
      ]
      const map11 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目阶段名称', field: 'milepostName' },
          { title: '项目经理', field: 'pmName' }
      ]
      const map12 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目阶段名称', field: 'milepostName' },
          { title: '任务名称', field: 'taskName' },
          { title: '项目经理', field: 'pmName' }
      ]
      const map13 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目阶段名称', field: 'milepostName' },
          { title: '任务名称', field: 'taskName' },
          { title: '风险解决人', field: 'solver' }
      ]
      const map14 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目代号', field: 'projectCode' },
          { title: '项目负责人', field: 'plName' },
          { title: '产品经理', field: 'productLeaderName' },
          { title: '项目经理', field: 'pmName' }
      ]
      const map15 = [
          { title: '工时对应时间', field: 'dailyDate' },
          { title: '项目名称', field: 'projectName' },
          { title: '项目阶段/用户故事名称', field: 'milepostName' },
          { title: '任务名称', field: 'taskName' },
          { title: '工时', field: 'workingHours' },
          { title: '风险描述', field: 'riskDescription' },
          { title: '解决方案', field: 'solution' }
      ]
      const map16 = [
          { title: '工时对应时间', field: 'dailyDate' },
          { title: '工作类型', field: 'workType' },
          { title: '工时', field: 'workingHours' }
      ]
      const map17 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目总监', field: 'projectDirector' },
          { title: '项目经理', field: 'pmName' },
          { title: 'PMO', field: 'projectManagementOffice' }
      ]
      // 新工单
      const map18 = [
          { title: '工单标题', field: 'content' },
          { title: '工单类型', field: 'type' },
          { title: '优先级', field: 'priority' },
          { title: '问题来源', field: 'questionSource' },
          { title: '解决人', field: 'solver' },
          { title: '提交时间', field: 'submitTime' }
      ]
      const map19 = [
          { title: '工时对应时间', field: 'dailyDate' },
          { title: '工单标题', field: 'content' },
          { title: '所属父工单标题', field: 'parentContent' },
          { title: '工时', field: 'workingHours' }
      ]
      const map20 = [
          { title: '项目名称', field: 'projectName' },
          { title: '产品经理', field: 'productLeaderName' },
          { title: 'PMO', field: 'projectManagementOffice' }
      ]
      const map21 = [
          { title: '项目名称', field: 'projectName' },
          { title: '项目阶段名称', field: 'milepostName' },
          { title: '任务名称', field: 'taskName' },
          { title: '任务负责人', field: 'taskOwner' },
          { title: '审核员', field: 'assessorName' }
      ]
      const map22 = [
          { title: '区域名称', field: 'areaName' },
          { title: '工厂简称', field: 'projectShortName' }
      ]
      const map23 = [
          { title: '人员名称', field: 'pmName' },
          { title: '受调度区域', field: 'dispatchAreaName' },
          { title: '受调度产品线', field: 'dispatchProductLine' }
      ]
      // 映射关系
      const fieldMap = {
          // 平台/市场项目-新建
          work_flow_code_project00000001: map1,
          work_flow_code_project_00000003: map1,
          work_flow_code_project_00000005: map1,
          work_flow_code_platform_project_risk_close_00000001: map1,
          work_flow_code_task_pt_00000001: map2,
          work_flow_code_task_pt_00000002: map2,
          work_flow_code_task_00000001: map2,
          work_flow_code_task_modify_00000001: map2,
          work_flow_code_delivery_project_create_00000001: map3,
          work_flow_code_delivery_project_delete_00000001: map3,
          work_flow_code_delivery_project_update_00000001: map3,
          work_flow_code_delivery_project_risk_close_00000001: map3,
          work_flow_code_requirement_change_00000001: map3,
          'work_flow_code_create-milestones_00000001': map4,
          work_flow_code_create_work_flow_code_milepost_00000003: map4,
          work_flow_code_editing_milestone_00000001: map4,
          work_flow_code_create_task_00000001: map5,
          work_flow_code_task_00000002: map5,
          work_flow_code_task_recovery_00000001: map5,
          work_flow_code_task_switch_00000001: map5,
          'work_flow_code_project-template-create_00000001': map6,
          work_flow_code_project_template_delete_00000001: map6,
          work_flow_code_project_template_update_00000001: map6,
          work_flow_code_project_template_open_close_00000001: map6,
          work_flow_code_editing_milestone_00000002: map11,
          project_template_list_delete_00000001: map7,
          project_template_list_go_offline_00000001: map7,
          project_template_list_go_online_00000001: map7,
          work_flow_code_task_sa_00000001: map12,
          work_flow_code_action_task_edit_00000001: map8,
          work_flow_code_action_task_complete_00000001: map8,
          work_flow_code_risk_00000001: map13,
          work_flow_code_project_00000007: map14,
          work_flow_code_delete_work_week_evolve_00000001: map9,
          work_flow_code_edit_work_week_evolve_00000001: map9,
          work_flow_code_add_work_week_evolve_00000001: map9,
          'work_flow_code_platform_create-monthly-goals_00000001': map10,
          'work_flow_code_platform_delete-monthly-goals_00000001': map10,
          'work_flow_code_platform_editing-monthly-goals_00000001': map10,
          'work_flow_code_delivery_create-monthly-goals_00000001': map10,
          'work_flow_code_delivery_delete-monthly-goals_00000001': map10,
          'work_flow_code_delivery_editing-monthly-goals_00000001': map10,
          work_flow_code_daily_00000001: map15,
          work_flow_code_daily_00000002: map16,
          work_flow_code_collaborate_task_create_00000001: map17,
          work_flow_code_collaborate_task_update_00000001: map17,
          work_flow_code_collaborate_task_delete_00000001: map17,
          work_flow_code_collaborate_task_complete_00000001: map17,
          work_flow_code_task_batch_delay_00000001: map17,
          // 其他映射关系
          // 工单映射
          work_flow_code_work_order_resolved_00000001: map18,
          work_flow_code_work_order_no_need_handle_00000001: map18,
          work_flow_code_work_order_apply_circulation_00000001: map18,
          work_flow_code_work_order_daily_00000001: map19,
          work_flow_code_platform_template_create_00000001: map20,
          work_flow_code_platform_template_update_00000001: map20,
          work_flow_code_platform_template_delete_00000001: map20,
          work_flow_code_platform_template_task_complete_00000001: map21,
          work_flow_code_platform_template_task_delete_00000001: map21,
          work_flow_code_project_progress_00000001: map22,
        work_flow_code_project_manager_dispatch_00000001: map23
      }
      // 为了计算反查类名
      const fieldMapReverse = {
          map1,
          map2,
          map3,
          map4,
          map5,
          map6,
          map7,
          map8,
          map9,
          map10,
          map11,
          map12,
          map13,
          map14,
          map15,
          map16,
          map17,
          map18,
          map19,
          map20,
          map21,
          map22,
          map23
      }
      const classMap = {
          map7: 'omit1',
          map9: 'omit2',
          map22: 'omit2',
          map11: 'omit3',
          map23: 'omit3',
          map16: 'omit3',
          map4: 'omit4',
          map17: 'omit4',
          map6: 'omit4',
          map8: 'omit4',
          map10: 'omit4',
          map12: 'omit4',
          map19: 'omit4',
          map13: 'omit4',
          map1: 'omit5',
          map3: 'omit5',
          map5: 'omit5',
          map14: 'omit5',
          map2: 'omit6',
          map18: 'omit6',
          map15: 'omit7'
      }
      // 获取数据
      // 获取数据
      const getApproveData = debounce(() => {
          approveState.approveData = []
          approveState.approveRemark = ''
          mainLoading.value = true

          post(`/solution-ppm/api/v2/built-in-system-ppm/approve/approve_list/${mappedActiveKey.value}`, {
              filter: {
                  processDefinitionRecordId: selectedTag.value?.processDefinitionRecordId
              },
              sort: {},
              pageNo: pagination.value.current,
              pageSize: pagination.value.pageSize
          })
              .then(data => {
                  if (data.code === 200) {
                      approveState.approveData = data.data.content.map(item => {
                          const fields = fieldMap[item.thirdProcessCode] || defaultMap
                          const fieldClassKey =
                              Object.keys(fieldMapReverse).find(key => fieldMapReverse[key] === fields) || ''
                          const fieldClass = classMap[fieldClassKey] || ''
                          return {
                              ...item,
                              fields: fields.map(field => ({
                                  title: field.title,
                                  value: item.approveFiledShow[field.field],
                                  class: fieldClass,
                                  id: field.title === '任务名称' ? 'task-long' : ''
                              })),
                              selected: false
                          }
                      })
                      pagination.value.total = data.data.totalElements
                  } else {
                      message.error(data.message)
                  }
              })
              .finally(() => {
                  mainLoading.value = false
              })
      }, 500) // 300ms 的防抖时间
      function debounce(func, delay) {
          let timer
          return function (...args) {
              clearTimeout(timer)
              timer = setTimeout(() => func.apply(this, args), delay)
          }
      }

      const activeChange = debounce(() => {
          console.log('activeChange triggered')
          pagination.value.current = 1
          pagination.value.pageSize = 20
          checkName.value = ''
          getTagData()
      }, 300)
      function innerTabChange() {
          pagination.value.current = 1
          getApproveData()
      }
</script>
<style lang="less" scoped>
  .page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
  }
  .page_root :deep(.@{ant-prefix}-spin-nested-loading),
  .page_root :deep(.@{ant-prefix}-spin-container)
   {
      height: 100%;
  }
  .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper)
   {
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
  }
  .page_root :deep(.@{ant-prefix}-table)
   {
    flex: auto;
    overflow: auto;
  }
  .table-moreBtn_down {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100px;
  }

  .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
    background: #ebf1ff;
  }

  /*  表格树结构样式处理，展开按钮层级增加*/
  :deep(.@{ant-prefix}-table-row-expand-icon) {
    z-index: 1;
  }
  /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
  :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 15px !important;
    width: calc(100% - 15px);
  }
  :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 30px !important;
    width: calc(100% - 30px);
  }
  :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 45px !important;
    width: calc(100% - 45px);
  }
  :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 60px !important;
    width: calc(100% - 60px);
  }

  /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
  :deep(.@{ant-prefix}-transfer-list)
   {
      height: 100%;
      width: 50%;
  }


  /*
      样式
      */
      .page_root {
          width: 100%;
          height: 100%;
          overflow: hidden;
      }
      .item-container {
          position: relative;
          margin-bottom: 10px;
          border: 1px solid #ccc;
          padding: 10px;
      }

      .item-content {
          display: flex;
          justify-content: space-between;
          border-left: 1px solid #d9d9d9;
          padding: 0 16px;
          flex: 1;
          display: flex;
          flex-direction: column;
      }
      .body {
          background-color: #fff;
          overflow: hidden;
          padding-bottom: 0;
          position: relative;
      }
      :deep(.ant3-tag-checkable) {
          background-color: #f0f2f5;
          height: 40px;
          padding: 10px 16px;
          flex-shrink: 0;
      }
      .sticky {
          position: sticky;
          left: 0;
          z-index: 1; /* 确保固定标签在其他标签之上 */
      }
      :deep(.ant3-tag-checkable-checked) {
          background-color: #d9e4fd;
          color: #3875ff;
          border-color: #3875ff;
          font-weight: 600;
      }
      .determine-div {
          margin-top: 20px;
      }
      .name-title {
          height: 20px;
          font-size: 16px;
          color: #3875ff;
      }
      .item {
          display: flex;
          background: #ffffff;
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
          border-radius: 4px;
          margin-bottom: 16px;
          height: 112px;

          flex-direction: column;
      }

      .detail-batch {
          display: flex;
          justify-content: space-between;
      }
      .table-action {
          flex: 1;
      }
      .item-title,
      .item-main {
          text-align: left;
      }
      .item-main {
          max-width: 150px;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.85);
          letter-spacing: 0;
          font-weight: 600;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          flex-shrink: 0;
      }
      .omit1 {
          max-width: 1200px;
      }
      .omit2 {
          max-width: 650px;
      }
      .omit3 {
          max-width: 420px;
      }
      .omit4 {
          max-width: 320px;
      }
      .omit5 {
          max-width: 260px;
      }
      .omit6 {
          max-width: 210px;
      }
      .omit7 {
          max-width: 150px;
      }
      .item-title {
          max-width: 150px;
          font-size: 14px;
          color: #595959;
          letter-spacing: 0;
          font-weight: 400;
      }
      .type-title {
          font-size: 16px;
          color: #3875ff;
          letter-spacing: 0;
          font-weight: 600;
          margin-bottom: 12px;
          position: relative;
          cursor: pointer;
      }
      .sub-daily {
          width: 88px;
          height: 28px;
          background: #52c41a;
          border: 1px solid #52c41a;
          border-radius: 2px;
          position: absolute;
          color: #fff;
          right: 0;
          top: 0;
          text-align: center;
          font-size: 14px;
          line-height: 28px;
      }
      .item-top {
          width: 100%;
          background-image: linear-gradient(270deg, rgba(56, 117, 255, 0) 0%, rgba(56, 117, 255, 0.2) 100%);
          border-radius: 4px 0 0 0;
          height: 40px;
          border-left: 4px solid #3875ff;
          padding: 10px 20px;
          margin-bottom: 10px;
          display: flex;
      }
      .item-inner {
          padding: 5px 16px;
          display: flex;
      }
      .detail-btn,
      .pass-btn,
      .reject-btn,
      .urg-btn,
      reject-btn {
          width: 64px;
          height: 28px;
          line-height: 28px;
          border-radius: 2px;
          text-align: center;
          cursor: pointer;
      }
      .detail-btn,
      .urg-btn {
          background: rgba(56, 117, 255, 0.1);
          border: 1px solid #3875ff;
          border-radius: 2px;
          color: #3875ff;
      }
      .pass-btn {
          background: rgba(82, 196, 26, 0.2);
          border: 1px solid #52c41a;
          border-radius: 2px;
          color: #52c41a;
      }
      .reject-btn {
          background: rgba(245, 34, 45, 0.1);
          border: 1px solid #f5222d;
          border-radius: 2px;
          color: #f5222d;
      }
      .sub-time {
          margin-right: 40px;
      }
      .sub-people {
          margin-right: 16px;
      }
      .urging {
          width: 48px;
          height: 22px;
          line-height: 22px;
          background: #fa5f00;
          border-radius: 2px;
          color: #fff;
          text-align: center;
          margin-left: 40px;
      }
      .top-tag {
          display: flex;
          flex-wrap: nowrap;
      }
      .top-tag-container {
          padding: 0 24px;
          overflow-x: auto;
          white-space: nowrap;
          display: flex;
          align-items: center;
          padding-bottom: 5px; /* 添加一些内边距以避免内容紧贴滚动条 */
          margin-bottom: 5px;
      }
      .top-tag-container::-webkit-scrollbar {
          height: 4px; /* 设置滚动条的高度 */
      }
      #myIframe {
          position: relative;
          margin-top: 20px;
      }
      .detail-content {
          display: flex;
          height: 100%;
      }
      .detail-left {
          flex: 1;
          margin-right: 16px;
      }
      .detail-right {
          width: 250px;
          padding: 16px 0;
          padding-left: 16px;
          border-left: 1px solid #d9d9d9;
      }
      .flow-path {
          color: #262626;
          font-weight: 600;
          height: 16px;
          line-height: 16px;
          border-left: 4px solid #3875ff;
          padding-left: 10px;
          margin-bottom: 10px;
      }
      .pagination-div {
          position: absolute;
          right: 30px;
          bottom: 0;
          padding: 10px;
          background: transparent; /* 可选：为背景添加颜色 */
      }
      .main {
          overflow: auto;
          height: calc(100vh - 270px);
          padding: 0 24px;
      }
      .default-font,
      .weight-font {
          font-size: 14px;
          color: #595959;
          letter-spacing: 0;
          font-weight: 400;
      }
      .weight-font {
          color: #262626;
          margin-right: 16px;
      }
      .in-progress,
      .approved,
      .reject,
      .revoke {
          width: 48px;
          height: 22px;
          line-height: 22px;
          text-align: center;
          border-radius: 2px;
          background: #bed2ff;
          color: #3875ff;
      }
      .approved {
          background: #ddf4d2;
          color: #52c41a;
      }
      .reject {
          background: #ffd4cc;
          color: #ff2a00;
      }
      .revoke {
          background: #d4d4d4;
          color: #595959;
      }

      .title-new-status {
          display: flex;
          height: 36px;
          line-height: 36px;
          padding: 0 16px;
          margin-bottom: 16px;
          margin-top: 16px;
          background-image: url('@/assets/images/a17cccf1c48390c6d512a33e9fcfb8af.png');
          background-size: cover;
          border: 1px solid #3875ff;
          border-radius: 5px;
          justify-content: space-between;
      }

      :deep(.ant3-steps-item-container) {
          padding: 0 0 0 16px;
      }
      :deep(.ant3-steps-item-tail::after) {
          margin-left: 12px;
          background-color: #3875ff;
      }
      :deep(.ant3-steps-item-description) {
          font-size: 12px;
          color: #595959;
          text-align: left;
          line-height: 20px;
          font-weight: 400;
      }
      :deep(.ant3-steps-item-icon) {
          width: 24px;
          height: 24px;
          line-height: 24px;
          color: #3875ff;
          margin-top: 6px;
      }
      :deep(.ant3-steps-item-title) {
          height: 28px;
          font-size: 14px;
          color: #262626;
          text-align: left;
          line-height: 22px;
          font-weight: 400;
      }
      :deep(.ant3-steps-item-process > .ant3-steps-item-container > .ant3-steps-item-icon) {
          background-color: #3875ff;
      }
      :deep(.ant3-steps-vertical > .ant3-steps-item > .ant3-steps-item-container > .ant3-steps-item-tail::after) {
          background: #3875ff;
      }
      :deep(.status-step .ant3-steps-vertical > .ant3-steps-item .ant3-steps-item-icon) {
          border-color: #3875ff;
      }
      :deep(.ant3-steps-item-finish .ant3-steps-item-icon > .ant3-steps-icon) {
          color: #3875ff !important;
      }
      .task-status-new {
          cursor: pointer;
      }
      .left-title,
      .right-title {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.65);
          letter-spacing: 0;
          text-align: right;
          font-weight: 400;
      }
      .weight-status {
          font-size: 14px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 500;
      }
      :deep(.ant3-tabs-nav-wrap) {
          padding: 0 24px;
      }
      .cover {
          position: absolute;
          width: 24px;
          background-color: #fff;
          height: 80px;
          left: 0;
      }
      .cover1 {
          background-color: #fff;
          width: 32px;
          height: 80px;
          position: absolute;
          right: 0;
      }
  .no-data-img{
        width: 264px;
        height: 192px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
      .no-data-msg{
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%,-50%);
        color: #595959;
      }
</style>